<template>
  <div class="dialog-box">
    <el-dialog
      :title="title"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :width="width"
      @close="close"
    >
      <div v-loading="loading">
        <div :class="[isNeedHeightCss?'content':'no-need-height']">
          <slot name="content"></slot>
        </div>
        <!-- 取消 确定 -->
        <div v-if="!isDetail" class="btn-footer m-b-20 m-t-40">
          <el-button class="cancel" @click="close">取消</el-button>
          <el-button v-if="isShowConfirmBtn" class="ok-btn" type="primary" :disabled="isShowConfirmDisabledBtn" @click="confirmChange">确认</el-button>
          <slot name="dialogBtn"></slot>
        </div></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    title: {
        type: String,
        default: '详情'
    },
    isDetail: {
      type: Boolean,
      default: false
    },
    isShowConfirmBtn: {
      type: Boolean,
      default: true
    },
    isShowConfirmDisabledBtn: {
      type: Boolean,
      default: false
    },
    width: {
        type: Number,
        default: 640
    },
    isNeedHeightCss: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      dialogVisible: false, // 弹窗显隐
      loading: false
    }
  },
  methods: {
    confirmChange() {
      this.$emit('confirm-change')
    },
    // 关闭弹窗
    close() {
      this.$nextTick(() => {
        this.dialogVisible = false
        this.$emit('close-change')
      })
    }
  }
}
</script>

<style lang="less" scoped>
div::-webkit-scrollbar {
  width: 8px; /* 纵向滚动条的宽 */
  height: 8px; /* 横向滚动条的高 */
}
div::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #ebebeb;
}
.content {
    max-height: 480px;
    padding: 0 20px;
    overflow: auto;
}

.no-need-height{
    padding: 0 20px;
    overflow: auto;
}
.btn-footer {
//   position: absolute;
//   bottom: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
}
::v-deep {
  .el-dialog .el-dialog__body {
    padding: 0px;
  }
}
</style>
